<template>
  <div class="list">
    <div :class="['bg-top', { news: tabActive }]">
      <ListTop ref="listTop" title="田野调查" :tabs="['工作站','扎根学校', '新闻动态']" :active="tabActive" @change="ChangeTab"/>
      <Workstation v-if="tabActive==0"/>
      <School v-if="tabActive==1"/>
      <News v-if="tabActive==2"/>
    </div>
  </div>
  <UiFooter/>
</template>

<script setup>
import ListTop from '@/components/listTop.vue';
import Workstation from './workstation.vue';
import School from './school.vue';
import News from './news.vue';

const {router} = inject('global');

let tabActive = ref(0);
let listTop = ref(null);
const ChangeTab = index => {
  if (index === tabActive.value) return;
  tabActive.value = index;
  // 变更url中的query active字段
  router.push(`/listSchoolAndNews?active=${index}`);
};

onMounted(() => {
  tabActive.value = parseInt(router.currentRoute.value.query.active) || 0;
});

watch(router.currentRoute, ()=>{
  tabActive.value = parseInt(router.currentRoute.value.query.active) || 0;
  listTop.value.Change(tabActive.value)
})

</script>

<style lang="scss" scoped>
.list {
  background: #ede8e2;
  padding: 0 0 100px 0;

  .bg-top {
    @include bgImg('@/assets/list/top-bg.png');
    background-size: auto 1000px;
    background-position: 0 368px;

    &.news {
      @include bgImg('@/assets/list/top-bg_news.png');
      background-size: auto 417px;
      background-position: 0 250px;
    }
  }
}
</style>
